<template>
	<view>
		<view class="address">
			<view class="iconfont icon icon-left">
				&#xe60c;
			</view>
			<view class="address-detail">
				<view class="person">
					<label class="label-person">白羊</label> 1555555555

				</view>
				<view class="">
					收货地址：河北省石家庄市长安桃园胜利北街柳辛庄北部时光14-4-4444

				</view>
				<view class="tishi">
					(收货地址不变时，可选择免费待收货服务)
				</view>
			</view>
			<view class="iconfont icon">
				&#xe640;
			</view>
		</view>
		<view class="address-box">
			<view class="address-item" v-for="(item,index) in shouhuoMessage">
				<view class="xuanze-address" @click="checkAddress(index)">
					<image class="xuanze-address-icon" mode="widthFix" :src="checked==index?'http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1.2.3-%E6%B7%BB%E5%8A%A0%E8%B4%AD%E7%89%A9%E5%9C%B0%E5%9D%80/android/drawable-xhdpi/Checked.png':'http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1.2.3-%E6%B7%BB%E5%8A%A0%E8%B4%AD%E7%89%A9%E5%9C%B0%E5%9D%80/android/drawable-xhdpi/%E6%A4%AD%E5%9C%861%E6%8B%B7%E8%B4%9D.png'" />
				</view>
				<view class="address-detail">
					<view class="person">
						<label class="label-person">{{item.name}}</label> {{item.phoneNumber}}

					</view>
					<view class="">
						<label class="moren" v-if="checked==index">默认</label>收货地址：{{item.adress}}

					</view>

				</view>
				<view class="bianji">
					编辑
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: 1,
				shouhuoMessage: [{
						name: '罗伊了',
						phoneNumber: 13312334333,
						adress: '辽宁省沈阳市和平区和额呵呵'
					},
					{
						name: '罗伊了',
						phoneNumber: 13312334333,
						adress: '辽宁省沈阳市和平区和额呵呵'
					},
					{
						name: '罗伊了',
						phoneNumber: 13312334333,
						adress: '辽宁省沈阳市和平区和额呵呵'
					}
				]
			};
		},
		methods: {
			checkAddress(index) {
				this.checked = index;
				console.log(index, this.checked)
			}
		},
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url: './xinzengdizhi/xinzengdizhi',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		}
	}
</script>

<style>
	.address {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: rgb(255, 255, 255);
		color: rgba(22, 31, 33, 1);
		padding: 5px 0;

	}

	.icon {
		margin: 0 30upx;

	}

	.icon-left {
		font-size: 20px;
	}

	.tishi {
		color: rgba(196, 156, 90, 1);
		line-height: 32px;
	}

	.person {
		line-height: 28px;
		font-size: 16px;
		color: #999999;
	}

	.label-person {
		font-size: 17px;
		font-weight: 600;
		color: rgba(22, 31, 33, 1);
	}

	.address-box {
		margin-top: 10px;
		background: rgb(255, 255, 255)
	}

	.address-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 15px 0;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}

	.address-item .address-detail {
		flex: 1;
	}

	.bianji {
		padding: 0 33upx;

		color: #999;
	}

	.xuanze-address,
	.xuanze-address-icon {
		height: 20px;
		width: 20px;
	}

	.xuanze-address {
		margin: 0 22upx 0 30upx;
	}

	.moren {
		width: 30px;
		height: 16px;
		background: rgba(197, 158, 95, 1);
		border-radius: 5upx;
		color: rgb(255,255,255);
		font-size: 11px;
		line-height: 16px;
		text-align: center;
		margin-right: 5px;
		padding: 0 5px;
	}
</style>
